<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>RXJS Marble Text Animation Creator</title>
    <link rel="shortcut icon" href="./assets/SVG/logo.svg" type="image/x-icon">
    <link rel="bookmark" href="./assets/SVG/logo.svg" type="image/x-icon">
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <header id='header' class='toolbar'>
        <div class='btn logoOut'>
            <img src="./assets/SVG/logo.svg" class='logo'>
            <div>Rxjs Marble Animation</div>

        </div>
        <div class="flex-grow"></div>
        <div class='btn logoOut ' id='hideEditor'>EditorVisible</div>
        <div class='btn logoOut run ' class=''>RUN</div>
    </header>
    <main>
        <div id='view'>
            <iframe src="./animation.html" id='iframe'></iframe>
        </div>
        <div class='coder animate__animated' id='editor'>
            <div id="container" style="width: 100%;height: 100%;">
            </div>
            <div class='toolbar'>
                <span class='btn run'>RUN</span>
                <span id='state' class='btn'>Listening Mode</span>
                <a href="" class='btn'>
                    <span class='btn'>Github</span>
                </a>
                <a href="" class='btn'>
                    <span class='btn'>Gitee</span>
                </a>

            </div>
        </div>
    </main>

</body>
<script src="https://cdn.jsdelivr.net/npm/rxjs/bundles/rxjs.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/monaco-editor@0.23.0/min/vs/loader.js"></script>

<script src="./index.js" type="module"></script>


</html>